<style media="screen">
  .business-config-container{
    padding: 24px 40px;
    overflow: hidden;
  }
  .type-container{
    float: left;
    width: 280px;
  }
  .business-config-wrap{
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    height: 420px;
    overflow-y: scroll;
  }
  .business-config-wrap::-webkit-scrollbar{
    width:0;
  }
  .type-container p{
    height: 30px;
    line-height: 30px;
  }
  .business-config-wrap li{
    padding:0 8px;
    height: 46px;
    line-height: 46px;
    overflow: hidden;
  }
  .business-config-wrap .add{
    height: 46px;
    line-height: 46px;
    overflow: hidden;
  }
  .business-config-wrap li .name{
    height: 46px;
    width:210px;
    float: left;
  }
  .business-config-wrap li .show-state.active{
    display: none;
  }
  .business-config-wrap li.selected{
    background-color: #f9f9f9;
  }
  .business-config-wrap li .type-ipt,
  .business-config-wrap li .name-ipt{
    width:210px;
    float: left;
    margin-top: 6px;
  }
  .business-config-wrap li .edit-state{
    display: none;
  }
  .business-config-wrap li .edit-state.active{
    display: block;
  }
  .business-config-wrap li .icon{
    padding-top: 17px;
    width:18px;
    float: left;
    cursor: pointer;
    /* display: none; */
  }
  .business-config-wrap li:hover{
    background-color: #f9f9f9;
  }
  .business-config-wrap li:hover .icon{
    display: block;
  }
  .business-config-wrap .add{
    padding: 8px;
  }
  .business-config-wrap .add .name-ipt{
    width: 210px;
    float: left;
  }
  .business-config-wrap .add .icon{
    padding-top: 10px;
    width:18px;
    float: right;
    margin-right:15px;
    cursor: pointer;
  }

  .arrow-container{
    width:204px;
    min-height: 504px;
    float: left;
    position: relative;
  }
  .business-config-container .arrow-container .icon{
    color:#5e67a5;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    width: 20px;
    height: 20px;
    font-size: 24px;
  }
</style>

<section id="business-config" class="ml-24 mr-24">
  <hl-page-header title="办公租赁-区域配置"></hl-page-header>

  <section class="business-config-container">
    <div class="type-container">
      <p>城市</p>
      <ul class="business-config-wrap">
        <li v-for="(item,index) in channelTypeList" @click.stop="selectChannelType(item.dictName,item.dictCode,index)" :class="{'selected':item.isSelect == 'Y'}">
          <div class="show-state" :class="{'active':item.isEdit == 'Y'}" >
            <div class="name">{{item.dictName}}</div>
            <span class="icon-Gm-edit icon" @click.stop="editChannelType(index)"></span>
            <span style="margin-left:8px;" class="icon-Gm-delete icon text-right" @click.stop="delChannelType(item.dictCode,index)"></span>
          </div>

          <div class="edit-state" :class="{'active':item.isEdit == 'Y'}">
            <input type="text" class="type-ipt form-control" v-model="item.dictName" @blur="confirmEditChannelType(item.dictName,item.dictCode,index)">
            <span style="margin-left:20px;" class="icon-Gm-cancel icon" @click.stop="cancelEditChannelType(index)"></span>
          </div>
        </li>
        <!-- 新增 -->
        <div class="add" v-show="isShowChannelTypeIpt" @blur="hideChannelTypeIpt">
            <input type="text" autofocus="autofocus" class="form-control name-ipt" v-model="addTypeValue" @blur="confirmAddChannelType" v-focus>
            <span class="icon-Gm-cancel icon" @click="cancelAddChannelType"></span>
        </div>
      </ul>
      <hl-button size="mini"  @on-click="addType" class="mtb-10">新增城市</hl-button>
    </div>

    <div class="arrow-container">
      <span class="icon-turn-right icon"></span>
    </div>

    <div class="type-container">
      <p>区县</p>
      <ul class="business-config-wrap">
        <li v-for="(item,index) in channelNameList">
          <div class="show-state" :class="{'active':item.isEdit == 'Y'}">
            <div class="name">{{item.dictName}}</div>
            <span class="icon-Gm-edit icon" @click.stop="editChannelName(index)"></span>
            <span style="margin-left:8px;" class="icon-Gm-delete icon text-right" @click.stop="delChannelName(item.dictCode,index)"></span>
          </div>

          <div class="edit-state" :class="{'active':item.isEdit == 'Y'}">
            <input type="text" class="name-ipt form-control" v-model="item.dictName" @blur="confirmEditChannelName(item.dictName,item.dictCode,index)">
            <span style="margin-left:20px;" class="icon-Gm-cancel icon" @click="cancelEditChannelName(index)"></span>
          </div>

        </li>
        <!-- 新增 -->
        <div class="add" v-if="isShowChannelNameIpt" @blur="hideChannelNameIpt">
            <input type="text" autofocus="autofocus" class="form-control name-ipt" v-model="addNameValue" @blur="confirmAddChannelName" v-focus>
            <span class="icon-Gm-cancel icon" @click="cancelAddChannelName"></span>
        </div>
      </ul>
      <hl-button size="mini" @on-click="addChannel" class="mtb-10">新增区县</hl-button>
    </div>
  </section>
</section>


<script src="modules/jwk/scripts/jwk_region_config.js" charset="utf-8"></script>